<template>
  <div class="facility-detail"  :style="'height:' + height + 'px;'">
    <HeadTop :title="headTitle" v-on:flagChang="flagChang" :flag="flag"></HeadTop>
    <div class="facility-detail-header">
      <img class="facility-detail-header-img" :src="data.picture"/>
    </div>
    <div class="facility-detail-con">
      <div class="facility-detail-con-title">{{data.equipmentName}}</div>
      <!--<div class="facility-detail-con-msg">这里是设备信息这里是设备信息这里是设备信息这里是设备信息</div>-->
      <div class="facility-detail-line"></div>
      <div class="facility-detail-tps">
        <div class="facility-detail-tps-div">
          <div class="facility-detail-tps-div-name">型号:</div>
          <div  class="facility-detail-tps-div-msg">{{data.equipmentModel}}</div>
        </div>
        <div class="facility-detail-tps-div">
          <div class="facility-detail-tps-div-name">使用时间:</div>
          <div  class="facility-detail-tps-div-msg">{{useTime}}天</div>
        </div>
        <div class="facility-detail-tps-div">
          <div class="facility-detail-tps-div-name">功率:</div>
          <div  class="facility-detail-tps-div-msg">{{data.equipmentPower}}</div>
        </div>
        <div class="facility-detail-tps-div">
          <div class="facility-detail-tps-div-name">是否报废:</div>
          <div  class="facility-detail-tps-div-msg">{{data.equipmentState}}</div>
        </div>
        <div class="facility-detail-tps-div">
          <div class="facility-detail-tps-div-name">使用鱼缸:</div>
          <div  class="facility-detail-tps-div-msg">{{data.fishTankId}}</div>
        </div>
        <div  class="facility-detail-tps-div-t">
          <div class="facility-detail-tps-div-name">初次使用日期:</div>
          <div  class="facility-detail-tps-div-msg">{{data.firstUseTime}}</div>
        </div>
      </div>
    </div>
    <div class="facility-detail-tab">
      <div class="facility-detail-tab-top">
        <img class="facility-detail-tab-top-img" src="../../../assets/icon-time.png" />
        <div v-for="(v, index) in data.useList" :key="index" v-if="index === 0">{{v.updateTime}}</div>
      </div>
      <div class="facility-detail-tab-top-line"></div>
      <div class="facility-detail-tabs">
        <div class="facility-detail-tabs-name">设备报表</div>
        <div class="facility-detail-tabs-line"></div>
        <div class="facility-detail-tabs-tips" @click="getReport()">设备操作报表</div>
      </div>
    </div>

    <FootTab></FootTab>
  </div>
</template>

<script>
import HeadTop from '../../../components/headTop2.vue'
import FootTab from '../../../components/footTab.vue'
import { getEquipment } from '../../../api/index.js'
import { updateEquipmentTask } from '../../../api/index.js'
export default {
  data: function () {
    return {
      headTitle: '设备名称',
      height: document.documentElement.clientHeight,
      data: {},
      useTime: '',
      flag: void 0
    }
  },
  methods: {
    getReport () {
      this.$router.push({path: '/facility/report'})
    },
    async getData () {
      let msg = await getEquipment(this.$route.query.id)
      // debugger
      this.data = msg.data
      this.flag = this.data.equipmentState === 0
      this.useTime = msg.data.useTime
    },
    async flagChang () {
      this.flag = !this.flag
      let equipmentState = this.flag ? 1 : 0
      let data = {
        id: this.data.id,
        equipmentState: equipmentState
      }
      await updateEquipmentTask(data)
    }
  },
  mounted () {
    this.getData()
  },
  components: {
    FootTab,
    HeadTop
  }
}
</script>

<style scoped>
  .facility-detail{
    background: #EDEAED;
  }
.facility-detail-header{
  width: 750px;
  height: 500px;
  background: #c2c2c2;
}
.facility-detail-header-img{
  width: 506px;
  height: 379px;
  margin-left: 120px;
  margin-top: 78px;
}
.facility-detail-con{
  width: 606px;
  padding: 35px 40px 30px 44px;
  /*background: #fff;*/
  margin-left: 30px;
  border-radius:10px;
  margin-top: 16px;
}
.facility-detail-con-title{
  margin-bottom: 20px;
  font-size: 34px;
  color: #4d4d4d;
  font-weight: bold;
}
.facility-detail-con-msg{
  font-size: 32px;
  color: #757575;
  margin-top: 24px;
  margin-bottom: 32px;
  line-height: 44px;
}
.facility-detail-line{
  opacity:0.14;
  height: 1px;
  background: #000;
  margin-left: 7px;
  width: 590px;
}
.facility-detail-tps{
  display: flex;
  flex-wrap: wrap;
}
.facility-detail-tps-div{
  display: flex;
  margin-top: 32px;
  width: 285px;
  padding-left: 16px;
  font-size: 26px;
}
.facility-detail-tps-div-name{
  color: #202020;
  margin-right: 30px;
}
.facility-detail-tps-div-msg{
  color: #9E9E9E;
}
.facility-detail-tps-div-t{
  font-size: 26px;
  display: flex;
  padding-left: 16px;
  margin-top: 32px;
}
.facility-detail-tab{
  margin-top: 16px;
  background: #fff;
  width: 690px;
  margin-left: 32px;
  border-radius: 10px;
}
.facility-detail-tab-top{
  height: 95px;
  display: flex;
  align-items: center;
  font-size: 32px;
  color: #9E9E9E;
}
.facility-detail-tab-top-img{
  width: 35px;
  height: 35px;
  margin-left: 37px;
  margin-right: 19px;
}
.facility-detail-tab-top-line{
  width:690px;
  height:1px;
  background: #000;
  opacity:0.14;
}
.facility-detail-tabs{
	display: flex;
	align-items: center;
	padding: 14px 0 9px 0;
}
.facility-detail-tabs-name{
	font-size: 34px;
	color: #202020;
	margin-left: 38px;
}
.facility-detail-tabs-line{
	width:2px;
	height:80px;
	opacity:0.14;
	background: #000;
	margin: 0 24px;
}
.facility-detail-tabs-tips{
	font-size: 26px;
	color: #9E9E9E;
	padding: 7px 12px;
	border: 2px solid #DEDBDE;
	border-radius:6px;
}
</style>
